<template>
  <div
    class="touch"
    @mousedown="start"
    ref="touch">
    <div
      v-show="itemVisible"
      class="item"
      :style="[{right:`${right*100}%`,left:`${left*100}%`},animateStyle]">
      {{ startTime }}  {{ endTime }}
    </div>
  </div>
</template>

<script>
import {timeToX, xToTime, xToFormatTime} from './utils.js'
import moment from 'moment'

export default {
  props: {
    timeArray: {
      type: Array,
      default: () => ['08:00', '20:00']
    },
    timeUnit: {
      type: Number,
      default: 0
    },
    exData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    unitTime () {
      return this.timeUnit * 60 * 1000 // 单位时间毫秒数
    }
  },
  data () {
    return {
      itemVisible: false,
      startX: 0,
      endX: 0,
      minX: 0,
      maxX: 0,
      minTime: '',
      maxTime: '',
      wrap: {},
      active: false,
      area: [0, 0], // 可滑动范围
      right: 1, // 百分比小数
      left: 0, // 百分比小数
      startTime: '',
      endTime: '',
      animateStyle: {}
    }
  },
  methods: {
    pxToFormatTime (x) {
      return xToFormatTime(x, this.wrap.width, this.timeArray)
    },
    pxToTime (x) {
      return xToTime(x, this.wrap.width, this.timeArray)
    },
    timeToPx (time) {
      return timeToX(time, this.wrap.width, this.timeArray)
    },
    start (e) {
      this.startX = this.endX = e.pageX
      this.active = true
      this.itemVisible = true
      this.wrap = this.$refs.touch.getBoundingClientRect()

      this.minTime = this.timeArray[0]
      this.maxTime = this.timeArray[1]
      this.minX = 0
      this.maxX = this.wrap.width

      let currentTime = this.pxToFormatTime(e.pageX - this.wrap.left)

      // 有已存在数据时，设置最多可滑动位置和最大时间
      for (let i = 0; i < this.exData.length; i++) {
        let current = this.exData[i]
        if (currentTime <= current.start) {
          this.maxX = this.timeToPx(current.start)
          this.maxTime = current.start
          break
        } else {
          this.maxX = this.timeToPx(this.timeArray[1])
          this.maxTime = this.timeArray[1]
        }
      }

      // 有已存在数据时，设置最小可滑动位置和最小时间
      for (let i = this.exData.length - 1; i > -1; i--) {
        let current = this.exData[i]
        if (currentTime >= current.end) {
          this.minX = this.timeToPx(current.end)
          this.minTime = current.end
          break
        } else {
          this.minX = this.timeToPx(this.timeArray[0])
          this.minTime = this.timeArray[0]
        }
      }

      // 获取的是百分比小数，便于处理窗口缩放时的位置自动调整
      this.right = 1 - (Math.max(this.startX, this.endX) - this.wrap.left) / this.wrap.width
      this.left = (Math.min(this.startX, this.endX) - this.wrap.left) / this.wrap.width

      document.onmousemove = this.move
      document.onmouseup = this.end

      this.animateStyle = {
        transition: 'none'
      }

      // 触发drag，会导致mouseup丢失
      if (e.stopPropagation) e.stopPropagation()
      if (e.preventDefault) e.preventDefault()
      e.cancelBubble = true
      e.returnValue = false
      return false
    },
    move (e) {
      this.endX = e.pageX

      if (this.endX <= this.wrap.left + this.minX) {
        this.endX = this.wrap.left + this.minX
      }
      if (this.endX >= this.wrap.left + this.maxX) {
        this.endX = this.wrap.left + this.maxX
      }

      if (!this.active) return

      // 获取的是百分比小数，便于处理窗口缩放时的位置自动调整
      this.left = (Math.min(this.startX, this.endX) - this.wrap.left) / this.wrap.width
      this.right = 1 - (Math.max(this.startX, this.endX) - this.wrap.left) / this.wrap.width

      this.$emit('change', {left: this.left, right: this.right})
    },
    end (e) {
      this.active = false

      let startPx = this.left * this.wrap.width
      let endPx = startPx + Math.abs(this.startX - this.endX)

      let startTime = this.pxToTime(startPx)
      let endTime = this.pxToTime(endPx)

      startTime = Math.floor(startTime / this.unitTime) * this.unitTime
      endTime = Math.ceil(endTime / this.unitTime) * this.unitTime

      if (startTime === endTime) {
        endTime += this.unitTime
      }

      this.startTime = moment(startTime).format('HH:mm')
      this.endTime = moment(endTime).format('HH:mm')

      if (this.startTime <= this.minTime) {
        this.startTime = this.minTime
      }
      if (this.endTime >= this.maxTime) {
        this.endTime = this.maxTime
      }

      this.left = this.timeToPx(this.startTime) / this.wrap.width
      this.right = 1 - this.timeToPx(this.endTime) / this.wrap.width

      this.animateStyle = {
        transition: 'all 0.3s'
      }

      document.onmousemove = null
      document.onmouseup = null

      this.$emit('done', {startTime: this.startTime, endTime: this.endTime})
    }
  },
  mounted () {
    // console.log(this.exData)
  }
}
</script>

<style scoped>
.touch{
    width: 100%;height: 100%; background: rgba(0, 0, 0, 0.37);position: relative;
}
.item{
    position: absolute;height: 100%;background: rgba(0, 0, 0, 0.486); pointer-events: none
}
</style>
